﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>PhyTouch</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .big-container {
            width: 100%;
            height: 400px;
            position: absolute;
          
        }

        .photo-wrap {
            -moz-perspective: 800px;
            -ms-perspective: 800px;
            -webkit-perspective: 800px;
            perspective: 800px;
    width: 100%;
        }

        .photo-container {
            width: 250px;
            height: 338px;
            margin: 0 auto;
            position: relative;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .block {
            width: 150px;
            height: 88px;
            left: 50px;
            top: 240px;
            position: absolute;
            font-size: 16px;
            line-height: 88px;
            text-align: center;
            color: #000;
        }

        .block01 {
            -moz-transform: rotateY(0deg) translateZ(220px);
            -ms-transform: rotateY(0deg) translateZ(220px);
            -o-transform: rotateY(0deg) translateZ(220px);
            -webkit-transform: rotateY(0deg) translateZ(220px);
            transform: rotateY(0deg) translateZ(220px);
        }

        .block02 {
            -moz-transform: rotateY(40deg) translateZ(220px);
            -ms-transform: rotateY(40deg) translateZ(220px);
            -o-transform: rotateY(40deg) translateZ(220px);
            -webkit-transform: rotateY(40deg) translateZ(220px);
            transform: rotateY(40deg) translateZ(220px);
        }

        .block03 {
            -moz-transform: rotateY(80deg) translateZ(220px);
            -ms-transform: rotateY(80deg) translateZ(220px);
            -o-transform: rotateY(80deg) translateZ(220px);
            -webkit-transform: rotateY(80deg) translateZ(220px);
            transform: rotateY(80deg) translateZ(220px);
        }

        .block04 {
            -moz-transform: rotateY(120deg) translateZ(220px);
            -ms-transform: rotateY(120deg) translateZ(220px);
            -o-transform: rotateY(120deg) translateZ(220px);
            -webkit-transform: rotateY(120deg) translateZ(220px);
            transform: rotateY(120deg) translateZ(220px);
        }

        .block05 {
            -moz-transform: rotateY(160deg) translateZ(220px);
            -ms-transform: rotateY(160deg) translateZ(220px);
            -o-transform: rotateY(160deg) translateZ(220px);
            -webkit-transform: rotateY(160deg) translateZ(220px);
            transform: rotateY(160deg) translateZ(220px);
        }

        .block06 {
            -moz-transform: rotateY(200deg) translateZ(220px);
            -ms-transform: rotateY(200deg) translateZ(220px);
            -o-transform: rotateY(200deg) translateZ(220px);
            -webkit-transform: rotateY(200deg) translateZ(220px);
            transform: rotateY(200deg) translateZ(220px);
        }

        .block07 {
            -moz-transform: rotateY(240deg) translateZ(220px);
            -ms-transform: rotateY(240deg) translateZ(220px);
            -o-transform: rotateY(240deg) translateZ(220px);
            -webkit-transform: rotateY(240deg) translateZ(220px);
            transform: rotateY(240deg) translateZ(220px);
        }

        .block08 {
            -moz-transform: rotateY(280deg) translateZ(220px);
            -ms-transform: rotateY(280deg) translateZ(220px);
            -o-transform: rotateY(280deg) translateZ(220px);
            -webkit-transform: rotateY(280deg) translateZ(220px);
            transform: rotateY(280deg) translateZ(220px);
        }

        .block09 {
            -moz-transform: rotateY(320deg) translateZ(220px);
            -ms-transform: rotateY(320deg) translateZ(220px);
            -o-transform: rotateY(320deg) translateZ(220px);
            -webkit-transform: rotateY(320deg) translateZ(220px);
            transform: rotateY(320deg) translateZ(220px);
        }

        .block img {
            width: 100%;
        }
    </style>
</head>
<body>
    <a href="https://github.com/AlloyTeam/PhyTouch" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3; width: 140px; height: 140px;">
        <img src="//alloyteam.github.io/github.png" alt="">
    </a>
    <div class="big-container">

        <div class="photo-wrap">

            <div class="photo-container" id="container">

                <div class="block block01">
                    <img src="../../example/asset/ci1.jpg" alt="" /></div>

                <div class="block block02">
                    <img src="../../example/asset/ci2.jpg" alt="" /></div>

                <div class="block block03">
                    <img src="../../example/asset/ci3.jpg" alt="" /></div>

                <div class="block block04">
                    <img src="../../example/asset/ci4.jpg" alt="" /></div>

                <div class="block block05">
                    <img src="../../example/asset/ci5.jpg" alt="" /></div>

                <div class="block block06">
                    <img src="../../example/asset/ci6.jpg" alt="" /></div>

                <div class="block block07">
                    <img src="../../example/asset/ci7.jpg" alt="" /></div>

                <div class="block block08">
                    <img src="../../example/asset/ci8.jpg" alt="" /></div>

                <div class="block block09">
                    <img src="../../example/asset/ci9.jpg" alt="" /></div>

            </div>

        </div>

    </div>

    <script src="../../transformjs/transform.js"></script>
    <script src="../../index.js"></script>
    <script>
        var container = document.querySelector("#container");
        Transform(container, true);
        new PhyTouch({
            touch: ".big-container",//反馈触摸的dom
            vertical: false,//不必需，默认是true代表监听竖直方向touch
            target: container, //运动的对象
            property: "rotateY",
            step: 40
        })
    </script>
</body>
</html>
